<template>
  <div class="container mybox">
    <!-- 链接分享页面 -->
    <header :style="{ backgroundImage: `url(${verify.head})` }">
      <span>
        {{ verify.headText }}
      </span>
    </header>
    <main>
      <div class="box">
        <div class="verify_title">
          <span>登录</span>
        </div>
        <div
          style="
            padding-left: 15px;
            padding-right: 15px;
            font-size: 18px;
            padding-top: 20px;
          "
        >
          <span>账号输入：</span>
        </div>
        <div>
          <md-field-group class="register_submit">
            <md-field
              v-model="mobile"
              icon="mobile"
              placeholder="请输入手机号"
              :class="{ notClick: isDirector }"
              :disabled="disabled"
            />
            <md-field
              v-model="code"
              icon="browse"
              placeholder="请输入验证码"
              :class="{ notClick: isDirector }"
              :disabled="disabled"
            >
              <div slot="rightIcon" @click="getCode" class="getCode red">
                <countdown v-if="counting" :time="60000" @end="countdownend">
                  <template slot-scope="props"
                    >{{ +props.seconds || 60 }}秒后获取</template
                  >
                </countdown>
                <span v-else>获取验证码</span>
              </div>
            </md-field>
            <md-field
              v-model="userName"
              icon="username"
              placeholder="请输入会员姓名"
              :class="{ notClick: isDirector }"
              :disabled="disabled"
            />
            <md-field
              v-model="userLevel"
              icon="lock"
              placeholder="客户类型"
              v-show="false"
              :disabled="disabled"
            />
            <div class="register_submit_btn">
              <van-button
                type="danger"
                size="large"
                @click="btnClick"
                :disabled="disabled"
                >{{ isDirector ? '分享页面' : '点击登录' }}</van-button
              >
            </div>
          </md-field-group>
        </div>
      </div>
    </main>
    <article>
      <h2>请关注公众号--喷喷涂涂</h2>
      <!-- <h3>
        喷喷涂涂联动万家厂商，打造线上线下一体化服务新模式，全品类服务涂装行业从业者，让利用户，给用户“智惠”体验。购买+加盟，省钱+赚钱，就上喷喷涂涂
      </h3> -->
    </article>
    <footer>
      <div>
        <md-field-group class="register_submit">
          <!-- <md-label icon="manager-o" :label="name"></md-label> -->
          <md-label icon="service-o" :label="phone"></md-label>
        </md-field-group>
      </div>
    </footer>
    <div class="shareit" @touchmove.prevent @click="closeShare" v-if="isShow">
      <img :src="shareZzc" />
    </div>
    <!--遮罩层-->
    <van-overlay :show="show">
      <div class="wrapper">
        <!-- <span
          @click="show = false"
          style="
            position: absolute;
            top: 10px;
            right: 10px;
            color: #fff;
            cursor: pointer;
          "
          >关闭</span
        > -->
        <section class="qr-box">
          <main class="qr">
            <vue-qr
              :logoSrc="avatar"
              :margin="10"
              :logoMargin="1"
              :text="qr_url"
              style="width: 180px; height: 180px"
            ></vue-qr>
          </main>
          <article class="qr_text">
            <div>长按识别二维码<br />登录喷喷涂涂网</div>
          </article>
        </section>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import field from '@/components/field/';
import label from '@/components/field-label/';
import fieldGroup from '@/components/field-group/';
import {
  getSmsCode,
  submit,
  userInfo,
  authInfo,
  getMemberInfoByUserId,
} from '@/api/api';
import { getLocalStorage } from '@/utils/local-storage';
import { Toast, Dialog, Overlay } from 'vant';
import share_zzc from '@/assets/images/share_zzc.png';
import logo from '@/assets/images/logo.png';
import wx from 'weixin-js-sdk';
import vueQr from 'vue-qr';
import head from '@/assets/images/verify/head.png';
import middle from '@/assets/images/verify/middle.png';
export default {
  data() {
    return {
      shareZzc: share_zzc,
      isShow: false,
      counting: false,
      mobile: '',
      code: '',
      userName: '',
      userLevel: 0,
      beforeMobile: '',
      phone: '',
      name: '',
      userId: -1,
      curUserId: -1,
      isDirector: false,
      khjl: '服务经理：',
      title: '客户登录',
      desc: '尊敬的用户您好！请绑定您的手机号，验证成功后会有专属客服为您服务！',
      link: '',
      imgUrl:
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/a3zj7my1ih02g8c39y2u.jpg', // 分享图标
      avatar: logo,
      qr_url: '',
      show: false,
      disabled: false,
      managerId: undefined,
      directorId: undefined,
      recommendId: undefined,
      verify: {
        head: head,
        middle: middle,
        headText: '喷喷涂涂网--涂装行业一站式服务平台',
      },
    };
  },

  created() {
    // //console.log(window.location.href)
    // //获取地址栏截取 shareId
    // let url = window.location.href;
    // console.log(url.indexOf('shareId='))
    // if (url.indexOf('shareId=') != -1) {

    // }
    this.init(window.location.href);
    //url.substring()
    // let {
    //   userId,
    //   shareId
    // } = getLocalStorage('userId', 'shareId');
    // this.curUserId = userId;
    // this.userId = shareId;
    // 获取当前用户信息
    // this.getCurUser();
    this.getParams();
  },

  methods: {
    init(url) {
      url = url || '';
      if (url.indexOf('shareId=') != -1) {
        //截取shareId
        let shareId = url.substring(
          url.indexOf('shareId=') + 'shareId='.length,
          url.length
        );
        //判断shareId 是否数字
        if (shareId && /^\d*$/.test(shareId, 'i', 'g')) {
          this.curUserId = shareId;
          //判断是用户自己扫自己
          let { userId } = getLocalStorage('userId');
          if (shareId == userId) {
            Dialog.alert({
              title: '系统提示!',
              message: '你已经注册!',
            });
            this.disabled = true;
          } else {
            this.getCurUser();
          }
        }
      }
    },
    getParams() {
      if (process.env.VUE_APP_BASE_API === 'https://www.xintu361.com/') {
        this.qr_url =
          'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzA4NDg5ODE5NA==&scene=124#wechat_redirect';
      } else {
        this.qr_url =
          'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=Mzg3MjU4NzM4MQ==&scene=124#wechat_redirect';
      }
    },
    /**
     * 获取推荐人信息
     */
    getCurUser() {
      if (!this.curUserId) {
        return;
      }
      userInfo({
        userId: this.curUserId,
      }).then((res) => {
        //不是普通的金牌会员不具备拉人资格
        if (!(!res.data.data.userLevel && res.data.data.memberLevel)) {
          Dialog.alert({
            title: '系统提示!',
            message: '你的推荐人不是金牌会员，不具备推荐资格!',
          });
          this.disabled = true;
          return;
        }
        this.phone = res.data.data.mobile || '手机号';
        this.name = res.data.data.name || '姓名';
        this.managerId = res.data.data.managerId;
        this.directorId = res.data.data.directorId;
      });
    },
    share() {
      this.isShow = true;
    },
    closeShare() {
      this.isShow = false;
    },
    isPoneAvailable() {
      var myreg = /^[1][0-9]{10}$/;
      if (!myreg.test(this.mobile)) {
        return false;
      } else {
        return true;
      }
    },
    registerSubmit() {
      if (this.mobile == '') {
        Toast.fail('手机号不能为空');
        return;
      }
      if (!this.isPoneAvailable()) {
        Toast.fail('手机号格式不正确');
        return;
      }

      if (this.code == '') {
        Toast.fail('验证码不能为空');
        return;
      }
      if (this.userName == '') {
        Toast.fail('姓名不能为空');
        return;
      }

      submit({
        mobile: this.mobile,
        code: this.code,
        userName: this.userName.replace(/\s/g, ''),
        managerId: this.managerId,
        recommendId: this.curUserId,
        directorId: this.directorId,
      })
        .then((res) => {
          if (res.data.errno != 0) {
            Toast.fail(res.data.errmsg);
            return; //注册失败
          } else {
            Toast.success('注册成功');
            this.disabled = true;
          }
          this.show = true;
          //判断是否是苹果手机
          // let u = navigator.userAgent;
          // if (
          //   u.indexOf('iPhone') > -1 ||
          //   u.indexOf('Windows Phone') > -1 ||
          //   u.indexOf('iPad') > -1
          // ) {
          //   //弹出公众号二维码
          //   this.show = true;
          // } else {
          //   if (process.env.VUE_APP_BASE_API === 'https://www.xintu361.com/') {
          //     this.qr_url =
          //       'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzA4NDg5ODE5NA==&scene=124#wechat_redirect';
          //   } else {
          //     this.qr_url =
          //       'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=Mzg3MjU4NzM4MQ==&scene=124#wechat_redirect';
          //   }
          // }
        })
        .catch((err) => {
          Toast.fail(err.data.errmsg);
        });
    },

    btnClick() {
      if (this.isDirector) {
        this.share();
      } else {
        this.registerSubmit();
      }
    },

    getCode() {
      if (this.counting) {
        return;
      }
      if (this.mobile == '') {
        Toast.fail('手机号不能为空');
        return;
      }
      if (!this.isPoneAvailable()) {
        Toast.fail('手机号格式不正确');
        return;
      }
      getSmsCode({
        mobile: this.mobile,
        checkMobile: '1',
      })
        .then((res) => {
          this.counting = true;
          this.beforeMobile = this.mobile;
          Toast.success('验证码已发送');
        })
        .catch((err) => {
          Toast.fail(err.data.errmsg);
        });
    },
    countdownend() {
      this.counting = false;
    },
  },

  components: {
    [field.name]: field,
    [label.name]: label,
    [fieldGroup.name]: fieldGroup,
    [Overlay.name]: Overlay,
    [vueQr.name]: vueQr,
  },
};
</script>

<style lang="scss" scoped>
@import '../../../assets/scss/mixin';

// .box {
//   transform: translate(0, -95px);
//   height: 190px;
//   top: 50%;
//   position: absolute;
//   width: 100%;

// }

// .qr {
//   height: 150px;
//   width: 100%;
//   text-align: center;
//   font-weight: bold;
// }

// .qr_text {
//   text-align: center;
//   line-height: 20px;
//   color: #000000;
//   font-weight: bolder;

//   div {
//     position: absolute;
//     left: 50%;
//     text-align: center;
//     width: 150px;
//     background-color: #FFFFFF;
//     transform: translateX(-75px);
//   }
// }

// .wrapper {
//   top: 0;
//   position: absolute;
//   height: 100%;
//   width: 100%;
//   z-index: 1;
// }

// .block {
//   width: 120px;
//   height: 120px;
//   background-color: #fff;
// }

// .verify_title {
//   padding-top: 20px;
//   background: #fff;
//   display: flex;
//   justify-content: center;
//   align-items: center;
//   font-size: 18px;
// }

// .register_submit {
//   padding-top: 20px;
//   background-color: #fff;
// }

// .register_submit_btn {
//   padding-top: 30px;
// }

// .getCode {
//   @include one-border(left);
//   text-align: center;
// }

// .time_down {
//   color: $orange;
// }

// .container {
//   background: #fff;
// }

// .van-button {
//   height: 44px;
//   line-height: 44px;
//   font-size: 18px;
// }

// .shareit {
//   position: absolute;
//   width: 100%;
//   height: 100%;
//   background: rgba(0, 0, 0, 0.85);
//   text-align: center;
//   top: 0;
//   left: 0;
// }

// #shareit img {
//   max-width: 100%;
// }

// .arrow {
//   position: absolute;
//   right: 10%;
//   top: 5%;
// }

// #share-text {
//   margin-top: 400px;
// }

// .van-button {
//   height: 40px;
//   line-height: 40px;
// }

// .notClick {
//   pointer-events: none;
// }

/deep/.md_field > .md_field_control {
  padding-right: 0 !important;
}
h2,
h3 {
  padding: 0;
  margin: 0;
  text-align: center;
}

.qr-box {
  transform: translate(0, -95px);
  height: 190px;
  top: 36%;
  position: absolute;
  width: 100%;
}

.qr {
  height: 150px;
  width: 100%;
  text-align: center;
  font-weight: bold;
  margin: 30px 0;
}

.qr_text {
  text-align: center;
  line-height: 20px;
  color: #000000;
  font-weight: bolder;

  div {
    position: absolute;
    left: 50%;
    text-align: center;
    width: 180px;
    background-color: #ffffff;
    transform: translateX(-90px);
  }
}

.wrapper {
  top: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 2;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}

.verify_title {
  //padding-top: 10px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
}

.register_submit {
  //padding-top: 20px;
  background-color: #fff;
  margin: 10px 0;
}

.register_submit_btn {
  padding-top: 10px;
}

.getCode {
  @include one-border(left);
  text-align: center;
}

.time_down {
  color: $orange;
}

.container {
  background: #fff;
}

.van-button {
  height: 44px;
  line-height: 44px;
  font-size: 18px;
}

.shareit {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  text-align: center;
  top: 0;
  left: 0;
}

#shareit img {
  max-width: 100%;
}

.arrow {
  position: absolute;
  right: 10%;
  top: 5%;
}

#share-text {
  margin-top: 400px;
}

.van-button {
  height: 40px;
  line-height: 40px;
}

.notClick {
  pointer-events: none;
}

.mybox {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 0px;

  > header {
    //height: 11%;
    min-height: 11%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    font-size: 1.2rem;
    text-align: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    //line-height: 40px;
    letter-spacing: 1px;
    color: white;
    font-weight: 900;
    padding: 5px 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  > article {
    //height: 19%;
    min-height: 19%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 20px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    h2 {
      color: rgba(22, 118, 228, 1);
      letter-spacing: 1px;
      font-size: 16px;
      margin-bottom: 10px;
    }

    h3 {
      color: white;
      letter-spacing: 1px;
      font-size: 12px;
      line-height: 20px;
    }
  }

  > main {
    justify-content: center;
    flex: 1;
    display: flex;
    align-items: center;

    .box {
      width: 100%;

      .field_group > div {
        margin-bottom: 10px !important;
      }
    }
  }

  > footer {
    //flex: 3;
    margin-bottom: 10px;
  }
}

.van-button {
  background-color: rgba(22, 118, 228, 1) !important;
}
</style>
